<!--
 * @Author: sxb
 * @Email: sxb@mail.com
 * @Date: 2020-06-17 13:38:02
 * @Descripttion: 注册页面
--> 

<template>
    <div class="register">
        <div class="register-panel">
            <div class="register-title">
                <h2>
                    <img src="../assets/images/max-logo.png" alt /> 注册
                </h2>
            </div>
            <div class="el-dialog__header">
                <span class="el-dialog__title">{{dialogTitle}}</span>
            </div>
            <div v-if="step === 1" class="content">
                <div class="el-dialog__body">
                    <p>一、注册方式说明</p>
                    <p>符合电力交易平台准入条件、获得准入资格的电力用户与售电企业(以下统称为市场主体)，可在《 光晖云平台》完成注册后，使用相关功能服务。</p>
                    <br />
                    <p>当前可通过以下方式进行注册：</p>
                    <p>1、注册企业管理员账号：</p>
                    <p>电力用户与售电企业通过使用浏览器访问平台地址，进入登录注册页面，输入企业基本信息，与联系人手机号等，注册成功，即可登录使用。注意，此注册账号为企业管理员账号。</p>
                    <br />
                    <p>2、售电公司、电力用户分配内部账号：</p>
                    <p>电力用户与售电企业进入平台后，均可通过系统设置，为企业分配发放内部人员账号，区分权限，进行操作管理。</p>
                    <br />
                    <p>本文主要阐述如何在线注册，在线注册过程总共分两大步完成：</p>
                    <p>第一步：售电企业自行注册管理员账号。</p>
                    <br />
                    <p>第二步：售电企业、电力用户各自通过系统管理模块，对内部人员发放账号，分配不同权限进行模块操作。举例：电力用户中，常规填报电量属于基层业务人员操作，统计看板、数据指标用于管理层决策使用。</p>
                    <br />
                    <p>二、注册申请单填写说明</p>
                    <p>1. 简要填写您的企业名称、联系方式等基础信息。</p>
                    <br />
                    <p>2. 账号申请信息中，填写您公司需要登录系统操作的人员账号信息，“企业名称”规则为：企业中文全称，“登录名”指的是用于登录系统的账号ID。</p>
                    <br />
                    <p>3. 售电企业、电力用户注册申请材料包括：企业法人姓名、法人身份证号码，管理员姓名，手机号等资料。注意，售电公司会验证注册资金与经营范围，需附合条件才可注册成功。</p>
                    <br />
                    <p>三、后续工作</p>
                    <p>注册成功后，进入《光晖云平台》后，建议您先查阅【帮助】-【使用手册】、【公告】信息，参阅【使用手册】流程能够帮助您熟悉系统功能。</p>
                </div>
            </div>
            <div v-if="step === 2" class="content">
                <div class="el-dialog__body">
                    <el-row style="margin-top: 30px;padding-left:20px">
                        <el-col :span="12" style="width:45%;margin-right:15px">
                            <el-card shadow="hover">
                                <el-radio v-model="userType" label="1" border ><span style="font-size:16px">点击选择售电企业类型</span></el-radio>
                            </el-card>
                        </el-col>
                        <el-col :span="12" style="width:45%">
                            <el-card shadow="hover">
                              
                                <el-radio v-model="userType" label="2" border><span style="font-size:16px">点击选择电力用户类型</span></el-radio>
                            </el-card>
                        </el-col>
                    </el-row>
                    <el-row></el-row>
                </div>
            </div>
            <div v-if="step === 3" class="content">
                <div class="el-dialog__body">
                    <el-form
                        :model="programForm"
                        ref="programForm"
                        :rules="programFormRules"
                        label-width="120px"
                        class="margin-top-30"
                    >
                        <el-form-item label="登录名" prop="username">
                            <el-input
                                v-model="programForm.username"
                                placeholder="企业全称拼音简写用于登录，例东铝铝业公司，账号为DLLY"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="密码" prop="password">
                            <el-input v-model="programForm.password" show-password></el-input>
                        </el-form-item>
                        <el-form-item label="确认密码" prop="confPwd">
                            <el-input v-model="programForm.confPwd" show-password></el-input>
                        </el-form-item>
                        <el-row style="height:30px;">
                            <el-col></el-col>
                        </el-row>
                        <el-form-item label="企业名称" prop="name">
                            <el-input v-model="programForm.name" placeholder="请输入您的企业全称"></el-input>
                        </el-form-item>
                        <el-form-item label="法人姓名" prop="legalPersonName">
                            <el-input v-model="programForm.legalPersonName" placeholder="请输入法人姓名"></el-input>
                        </el-form-item>
                        <el-form-item label="法人身份证号码" prop="legalPersonIdNumber">
                            <el-input
                                v-model="programForm.legalPersonIdNumber"
                                placeholder="请输入法人身份证号码"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="手机号码" prop="phone">
                            <el-input v-model="programForm.phone" placeholder="请输入您的手机号码，用于登录或找回密码"></el-input>
                        </el-form-item>
                        <el-row>
                            <el-col :span="16">
                                <el-form-item label="验证码" prop="code">
                                    <el-input v-model="programForm.code"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <img :src="codeUrl" @click="getCode" />
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
            </div>
            <div v-if="step === 4" class="content">
        <div class="el-dialog__body">
          <el-row :gutter="20" class="margin-top-30">
            <el-col :span="7">
              <label class="el-form-item__label" style="width: 140px; float: right;">企业名称</label>
            </el-col>
            <el-col :span="12">
              <span class="line-height-40">{{this.resCompanyInfo.name}}</span>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="7">
              <label class="el-form-item__label" style="width: 140px; float: right;">法人姓名</label>
            </el-col>
            <el-col :span="12">
              <span class="line-height-40">{{this.resCompanyInfo.legalPersonName}}</span>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="7">
              <label class="el-form-item__label" style="width: 140px; float: right;">法人身份证号</label>
            </el-col>
            <el-col :span="12">
              <span class="line-height-40">{{this.resCompanyInfo.legalPersonIdNumber}}</span>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="7">
              <label class="el-form-item__label" style="width: 140px; float: right;">统一社会信用代码</label>
            </el-col>
            <el-col :span="12">
              <span class="line-height-40">{{this.resCompanyInfo.socialCreditCode}}</span>
            </el-col>
          </el-row>
          <!-- <el-row :gutter="20">
            <el-col :span="7">
              <label class="el-form-item__label" style="width: 140px; float: right;">经营行业</label>
            </el-col>
            <el-col :span="12">
              <span class="line-height-40">{{this.resCompanyInfo.industry}}</span>
            </el-col>
          </el-row> -->
          <el-row :gutter="20">
            <el-col :span="7">
              <label class="el-form-item__label" style="width: 140px; float: right;">地址</label>
            </el-col>
            <el-col :span="12">
              <span class="line-height-40">{{this.resCompanyInfo.adressDetail}}</span>
            </el-col>
          </el-row>
        </div>
            </div>
            <!-- <div v-if="step === 4" class="content">
                <div class="el-dialog__body">
                    <el-row :gutter="20" class="margin-top-30">
                        <el-col :span="7">
                            <label
                                class="el-form-item__label"
                                style="width: 140px; float: right;"
                            >企业名称</label>
                        </el-col>
                        <el-col :span="12">
                            <span class="line-height-40">1231231</span>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="7">
                            <label
                                class="el-form-item__label"
                                style="width: 140px; float: right;"
                            >法人姓名</label>
                        </el-col>
                        <el-col :span="12">
                            <span class="line-height-40">123123123</span>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="7">
                            <label
                                class="el-form-item__label"
                                style="width: 140px; float: right;"
                            >法人身份证号</label>
                        </el-col>
                        <el-col :span="12">
                            <span class="line-height-40">1231231</span>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="7">
                            <label
                                class="el-form-item__label"
                                style="width: 140px; float: right;"
                            >统一社会信用代码</label>
                        </el-col>
                        <el-col :span="12">
                            <span class="line-height-40">123123123</span>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="7">
                            <label
                                class="el-form-item__label"
                                style="width: 140px; float: right;"
                            >经营行业</label>
                        </el-col>
                        <el-col :span="12">
                            <span class="line-height-40">123123123123</span>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="7">
                            <label
                                class="el-form-item__label"
                                style="width: 140px; float: right;"
                            >地址</label>
                        </el-col>
                        <el-col :span="12">
                            <span class="line-height-40">12312312312</span>
                        </el-col>
                    </el-row>
                </div>
            </div> -->
            <div class="footer">
                <el-row>
                    <el-col class="col-height-80" :span="16">
                        <el-checkbox
                            v-if="step === 1"
                            style="padding-left: 20px"
                            @change="setReadStatus"
                        >我已阅读注册须知并同意条款</el-checkbox>
                    </el-col>
                    <el-col :span="8">
                        <el-button
                            type="primary"
                            style="float:right; margin:18px 20px"
                            @click="next"
                            :disabled="!isRead"
                        >下 一 步</el-button>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>
<script>
import { getCodeImg } from "@/api/login";
import { apiPostDeptExtRegister } from "@/api/customerfiles/deptExt";

export default {
    data() {
        //确认密码验证
        var confPwdVerify = (rule, value, callback) => {
            if (value) {
                if (this.programForm.password != value) {
                    callback(new Error("两次输入密码不一致！"));
                }
                callback();
            }
        };
        //身份证号验证
        var cardIdVerify = (rule, value, callback) => {
            if (value) {
                var reg = /(^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$)|(^\d{6}(18|19|20)\d{2}(0[1-9]|10|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$)/;
                if (!reg.test(value)) {
                    callback(new Error("请输入正确的身份证号格式"));
                }
                callback();
            }
        };
        //手机号验证
        var phoneVerify = (rule, value, callback) => {
            if (value) {
                var reg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;
                if (!reg.test(value)) {
                    callback(new Error("请输入正确的手机号格式"));
                }
                callback();
            }
        };
        return {
            step: 1,
            userType: "1", // 2电力用户1电力企业
            isRead: false,
            dialogTitle: "欢迎使用光晖云平台自助注册向导",
            codeUrl: "",
            programForm: {
                id: 0,
                deptExtType: "",
                name: "",
                username: "",
                password: "",
                legalPersonName: "",
                legalPersonIdNumber: "",
                phone: "",
                code: "",
                uuid: ""
            },
            programFormRules: {
                username: [
                    { required: true, message: "请输入登录名", trigger: "blur" }
                ],
                password: [
                    { required: true, message: "请输入密码", trigger: "blur" }
                ],
                confPwd: [
                    {
                        required: true,
                        message: "请输入确认密码",
                        trigger: "blur"
                    },
                    { validator: confPwdVerify, trigger: "blur" }
                ],
                name: [
                    {
                        required: true,
                        message: "请输入企业名称",
                        trigger: "blur"
                    }
                ],
                legalPersonName: [
                    {
                        required: true,
                        message: "请输入法人姓名",
                        trigger: "blur"
                    }
                ],
                legalPersonIdNumber: [
                    {
                        required: true,
                        message: "请输入法人身份证号码",
                        trigger: "blur"
                    },
                    { validator: cardIdVerify, trigger: "blur" }
                ],
                phone: [
                    {
                        required: true,
                        message: "请输入手机号码",
                        trigger: "blur"
                    },
                    { validator: phoneVerify, trigger: "blur" }
                ],
                code: [
                    { required: true, message: "请输入验证码", trigger: "blur" }
                ]
            },
            resCompanyInfo: {
                name: "",
                legalPersonName: "",
                legalPersonIdNumber: "",
                socialCreditCode: "",
                industry: "",
                adressDetail: ""
            }
        };
    },
    created() {
        this.getCode();
    },
    methods: {
        next() {
            switch (this.step) {
                case 1:
                    this.dialogTitle = "请选择要注册的类型";
                    this.step++;
                    break;
                case 2:
                    this.dialogTitle =
                        this.userType != 1
                            ? "注册电力用户信息"
                            : "注册售电企业信息";
                    this.step++;
                    break;
                case 3:
                    this.$refs.programForm.validate(valid => {
                        if (valid) {
                            let self = this;
                            this.postDeptExtRegister(function(res) {
                                if (res != undefined && res != null) {
                                    self.resCompanyInfo.name = res.name;
                                    self.resCompanyInfo.legalPersonName =
                                        res.legalPersonName;
                                    self.resCompanyInfo.legalPersonIdNumber =
                                        res.legalPersonIdNumber;
                                    self.resCompanyInfo.socialCreditCode =
                                        res.socialCreditCode;
                                    self.resCompanyInfo.industry = res.industry;
                                    self.resCompanyInfo.adressDetail = res.Address;
                                }
                                self.dialogTitle = "您的企业信息";
                                self.step++;
                            });
                        } else {
                            console.log("error submit!!");
                            return false;
                        }
                    });
                    break;
                case 4:
                    this.$alert(
                        '<div style="height:40px; margin-top:10px;"><p style="font-size:18px">注册成功!<p></div>',
                        "",
                        {
                            confirmButtonText: " 去登录 ",
                            type: "success",
                            center: true,
                            dangerouslyUseHTMLString: true,
                            callback: action => {
                                this.$router.push({ path: "/login" });
                            }
                        }
                    );
                    break;
            }
        },
        getCode() {
            getCodeImg().then(res => {
                this.codeUrl = res.img;
                this.programForm.uuid = res.uuid;
            });
        },
        setReadStatus(val) {
            this.isRead = val;
        },
        postDeptExtRegister(callback) {
            let form = this.programForm;
            form.deptExtType = this.userType;
            apiPostDeptExtRegister(form)
                .then(res => {
                    if (callback) {
                        callback(res);
                    }
                })
                .catch(error => {
                    this.getCode();
                });
        }
    }
};
</script>
<style lang="scss" scoped>
.register {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-size: cover;
    background: linear-gradient(#02796d, #00443d);
    background: -webkit-linear-gradient(#02796d, #00443d);
    background: -o-linear-gradient(#02796d, #00443d);
    background: -moz-linear-gradient(#02796d, #00443d);
    background: -ms-linear-gradient(#02796d, #00443d);
    background-image: url("../assets/images/login_bg.jpg");
    background-position: center bottom;
    background-repeat: no-repeat;
}
.register-panel {
    position: relative;
    width: 45%;
    height: 65%;
}
.register-title {
    position: absolute;
    top: -55px;
    height: 40px;
    color: #ffffff;
    z-index: 999;
}
.el-dialog__header {
    background: #ffffff;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    padding: 60px 60px 20px 60px;
}
.el-dialog__body {
    padding: 0px 60px 30px 60px;
}
.register-panel .content {
    height: 75%;
    background: #ffffff;
    overflow-y: auto;
}
.register-panel .footer {
    height: 80px;
    line-height: 80px;
    background: #e8e8e8;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}
.col-height-80 {
    height: 80px;
    line-height: 80px;
}
.el-radio__label {
    size: 20px;
}
.el-radio--small.is-bordered {
    padding: 43px 15px 0 10px;
    border-radius: 3px;
    height: 102px;
    width: 80%;
}
.el-row {
    height: 65px;
    line-height: 65px;
    margin-bottom: 20px;
    &:last-child {
        margin-bottom: 0;
    }
}
.margin-top-30 {
    margin-top: 30px;
}
.line-height-40 {
    line-height: 40px;
}
.footer {
    height: 65px !important;
}
.col-height-80 {
    height: 65px;
    line-height: 65px;
}
.el-radio--small.is-bordered{
  width: 100% !important;
  border: none;
}
.el-radio__label{
  font-size: 16px !important;
}
.el-col-12{
  height: 40px !important;
  line-height: 40px !important;
  color: #222;
}
.el-form-item__label{
  color:#999
}
.el-row{
  margin-bottom: 0;
}

.el-message-box__status{
  font-size: 56px;
}
</style>